<template>
  <div class="box_container">
    <el-card class="pag-container">
      <div class="title_font">
        <span style="background-color: #2158F3;"> &nbsp</span> &nbsp;基本信息
      </div>
      <el-form :model="companyForm" label-width="50px" label-position="left" style="margin-top: 40px;width: 800px;">
        <el-form-item>
          公司名称： {{ companyForm.name }}
          <a style="color: #7CAFFF;margin-left: 10px"
            @click="param.dialogVisibleWarning = true">&nbsp;&nbsp;&nbsp;修改企业名称</a>
        </el-form-item>
        <el-form-item>
          统一社会信用代码： {{ companyForm.invoiceTaxnum || '空' }}
        </el-form-item>
        <el-form-item>主营业务：
          <!-- 主营业务： {{ filter.mainBusiness[companyForm.mainBusiness] }} -->
          <el-select v-model="companyForm.mainBusiness" placeholder="请选择" style="width: 150px;">
            <el-option v-for="item in param.mainBusiness" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          认证完成时间： {{ formatDate(companyForm.createTime, 2) }}
        </el-form-item>
        <el-form-item>
          <div style="width: 100%;">企业logo:</div>
          <upload-Img ref="uploadImgRef" v-model="param.mainImgList" :maxLimit="1" :urlList="companyForm.companyLogo"
            @uploadRemoveSccess="" style="width:1000px;height: 1000px;" />
          <div style="width: 100%;font-size: small;font-weight: 500;">图片大小不能超过1M，支持png/jpg格式，尺寸500*500px
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width: 100%;">企业宣传活动:</div>
          <upload-Img ref="uploadImgRef" v-model="param.mainImgList" :urlList="companyForm.publicizePhoto"
            @uploadRemoveSccess="" style="width:1000px;height: 1000px;" />
          <div style="width: 100%;font-size: small;font-weight: 500;">图片大小不能超过2M，支持png/jpg格式，尺寸1120*630px</div>
        </el-form-item>
        <el-form-item>
          <div style="width: 100%;">产品与服务:</div>
          <el-button>新增产品/服务</el-button>
        </el-form-item>
        <el-form-item>
          <div v-for="(item, index) in companyForm.businessList" style="margin-left: 10px;">
            <div>{{ item.lable }}</div>
            <div style="width: 100px;height: 100px;border: 1px solid #ccc;">

            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div>企业介绍:</div>
          <el-input v-model="companyForm.companyName" type="textarea" rows="3" show-word-limit maxlength="200"
            placeholder="请输入企业介绍/企业文化/发展历程" />
        </el-form-item>
      </el-form>
      <div style="width: 100%;text-align: center;">
        <el-button type="primary">保存</el-button>
      </div>
    </el-card>

    <el-card class="pag-container">
      <div class="title_font">
        <span style="background-color: #2158F3;"> &nbsp</span> &nbsp;银行账户
      </div>
      <el-form inline label-width="120px">
        <el-form-item label="银行名称：">
          <el-input v-model="companyForm.bank" placeholder="开户行名称" style="width: 300px;" />
        </el-form-item>
        <el-form-item label="RMB账户：">
          <el-input v-model="companyForm.rmbAccount" placeholder="请输入RMB账户" style="width: 300px;" />
        </el-form-item>
        <br>
        <el-form-item label="SWIFT CODE：">
          <el-input v-model="companyForm.swiftCode" placeholder="请输入SWFT CODE" style="width: 300px;" />
        </el-form-item>
        <el-form-item label="USD账户：">
          <el-input v-model="companyForm.usdAccount" placeholder="请输入USD账户" style="width: 300px;" />
        </el-form-item>
      </el-form>
      <div style="width: 100%;text-align: center;">
        <el-button type="primary">保存</el-button>
      </div>
    </el-card>

    <el-card class="pag-container">
      <div class="title_font">
        <span style="background-color: #2158F3;"> &nbsp</span> &nbsp;企业认证
      </div>
      <el-row>
        <div v-for="(item, index) in companyForm.companyImgs" style="margin-left: 20px;float: left;">
          <div>{{ item.lable }}</div>
          <div style="width: 150px;height: 100px;border: 1px solid #ccc;">
            <img :src="item.value" v-if="item.value" style="width: 100%;" />
          </div>
        </div>
      </el-row>
      <div style="width: 100%;text-align: center;">
        <el-button @click="goCompanyCheck" type="primary">企业实名认证</el-button>
        <el-button @click="goCompanyCheck" type="primary">企业签署核验</el-button>
      </div>
    </el-card>

    <el-card class="pag-container">
      <div class="title_font">
        <span style="background-color: #2158F3;"> &nbsp</span> &nbsp;联系方式
      </div>
      <el-form inline label-width="120px">
        <el-form-item style="width: 50%;">
          联系人： {{ companyForm.contacts }} <a style="color: #7CAFFF;margin-left: 10px" @click="">修改</a>
        </el-form-item>
        <el-form-item>
          所在地： {{ companyForm.location }}<a style="color: #7CAFFF;margin-left: 10px" @click="">修改</a>
        </el-form-item>
        <el-form-item style="width: 50%;">
          联系电话： {{ companyForm.tel }}<a style="color: #7CAFFF;margin-left: 10px" @click="">修改</a>
        </el-form-item>
        <el-form-item>
          详细地址： {{ companyForm.detailedAddress }}<a style="color: #7CAFFF;margin-left: 10px" @click="">修改</a>
        </el-form-item>
        <el-form-item style="width: 50%;">
          邮箱地址： {{ companyForm.email }}<a style="color: #7CAFFF;margin-left: 10px" @click="">修改</a>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="pag-container">
      <div class="title_font">
        <span style="background-color: #2158F3;"> &nbsp</span> &nbsp;认证记录
      </div>
    </el-card>

    <el-dialog v-model="param.dialogVisibleWarning" @close="param.step = 1" title="认证变更" style=" text-align: center;">
      <div v-if="param.step == 1">
        <div>
          <span>企业名称变更需提交变更后的企业营业执照</span>
          <div>
            <el-checkbox v-model="param.isAgree" />
            <span style="font-size: 12px;">
              我已阅读并接受
              <a href="#">《申请账号主体变更协议》</a>
              <a href="#">《接受账号主体变更协议》</a>
            </span>
          </div>
        </div>
        <el-button type="primary" @click="param.step = 2">下一步</el-button>
      </div>
      <div v-if="param.step == 2">
        <el-form label-width="200">
          <el-form-item label="原企业名称：">{{ companyForm.name }}</el-form-item>
          <el-form-item label="变更后企业名称：">
            <el-input v-model="param.companyNameNew" size="large" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="变更后企业营业执照：">
            <licenseOcr ref="licenseRef" :needOcr="true" :drag="false" @ocrLicense="ocrLicense">
            </licenseOcr>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="param.step = 1">上一步</el-button>
        <el-button type="primary" @click="param.dialogVisibleWarning = false">确定</el-button>
      </div>

    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import IDCardOcr from '@/components/upload/IDCardOcr.vue'
import licenseOcr from '@/components/upload/licenseOcr.vue'
import orderInfo from '@/store/modules/order'
import { formatDate } from '@/utils'
import { ref, reactive, toRefs, onMounted, onActivated } from 'vue'
import { getSysCompanyInfoById } from '@/api/company/index'
import uploadImg from '@/components/upload/img.vue'
import { getReturnData } from '../../../api/orderManage/returnBoxDetail'

const param = reactive({
  step: 1,
  mainImgList: [],
  showMainImgList: [],
  mainBusiness: [
    { value: 5, label: '货代企业' },
    { value: 10, label: '租箱企业' },
    { value: 15, label: '箱贸易企业' },
    { value: 20, label: '集卡车队企业' },
    { value: 25, label: '堆场企业' },
  ]
})
const companyForm = ref({
  name: '',
  businessList: [{ lable: '1.核心业务:', value: '' }, { lable: '2.产品介绍:', value: '' },], //'1.核心业务:', '2.产品介绍:', '3.解决方案:', '4.客户案例:',
  companyImgs: [{ lable: '营业执照：', value: '' }, { lable: '法人身份证：', value: '' },]
})
const filter = reactive({
  mainBusiness: { '5': '货代企业', '10': '租箱企业', '15': '箱贸易企业', '20': '集卡车队企业', '25': '堆场企业' }
})

onActivated(() => {
  getCompanyInfo()
})

// 获取用户信息
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const getCompanyInfo = () => {
  const user = userStore.getUser()
  // const companyId = orderInfo().rowData.companyId
  console.log(user.companyId)
  const companyId = user.companyId
  getReturnData
  if (!companyId) return
  getSysCompanyInfoById(companyId).then(res => {
    companyForm.value = res.data
    companyForm.value.businessList = [{ lable: '1.核心业务:', value: '' }, { lable: '2.产品介绍:', value: '' },]
    companyForm.value.companyLogo = JSON.parse(res.data.companyLogo)
    companyForm.value.publicizePhoto = JSON.parse(res.data.publicizePhoto)
    const businessLicense = JSON.parse(res.data.businessLicense) || []
    const identityPhoto = JSON.parse(res.data.identityPhoto)
    if (businessLicense.length > 0 && businessLicense[0].url) {
      companyForm.value.companyImgs = [
        { lable: '营业执照：', value: businessLicense[0].url },
        { lable: '法人身份证 正：', value: identityPhoto[0].url },
        { lable: '法人身份证 反：', value: identityPhoto[1].url }
      ]
    }
  })
}

//企业实名认证
import { useRouter } from 'vue-router';
const router = useRouter()
const goCompanyCheck = () => {
  router.push('companyCheck')
}

// 发票识别
const ocrLicense = (val: any) => {
  console.log(val.name)
  param.companyNameNew = val.name
  return invoice.value.invoiceNo = val.data.invoiceNo
}

// 公司信息变更
import { addSysCompany, updateSysCompany } from '@/api/company/index'
function handleUpdate() {
  const data = {
    "id": 6,
    "name": "测试公司",
    "businessLicense": "[{\"name\":\"20240712/324ec5ab3da2443b934eb9bc596990d1.jpg\",\"originalFileName\":\"原图sync.jpg\",\"url\":\"http://47.122.3.254:9000/default/20240712/324ec5ab3da2443b934eb9bc596990d1.jpg\"}]",
    "identityPhoto": "[{\"name\":\"20240712/324ec5ab3da2443b934eb9bc596990d1.jpg\",\"originalFileName\":\"原图sync.jpg\",\"url\":\"http://47.122.3.254:9000/default/20240712/324ec5ab3da2443b934eb9bc596990d1.jpg\",\"type\":1},{\"name\":\"20240712/324ec5ab3da2443b934eb9bc596990d1.jpg\",\"originalFileName\":\"原图sync.jpg\",\"url\":\"http://47.122.3.254:9000/default/20240712/324ec5ab3da2443b934eb9bc596990d1.jpg\",\"type\":2}]",
    "companyLogo": "[{\"name\":\"20240712/324ec5ab3da2443b934eb9bc596990d1.jpg\",\"originalFileName\":\"原图sync.jpg\",\"url\":\"http://47.122.3.254:9000/default/20240712/324ec5ab3da2443b934eb9bc596990d1.jpg\"}]",
    "publicizePhoto": "[{\"name\":\"20240712/324ec5ab3da2443b934eb9bc596990d1.jpg\",\"originalFileName\":\"原图sync.jpg\",\"url\":\"http://47.122.3.254:9000/default/20240712/324ec5ab3da2443b934eb9bc596990d1.jpg\"}]",
    "productPhoto": "[{\"name\":\"20240712/324ec5ab3da2443b934eb9bc596990d1.jpg\",\"originalFileName\":\"原图sync.jpg\",\"url\":\"http://47.122.3.254:9000/default/20240712/324ec5ab3da2443b934eb9bc596990d1.jpg\"}]",
    "publicizeIntroduce": "企业介绍",
    "bank": "中国工商银行",
    "rmbAccount": "123456789012345678",
    "usdAccount": "123456789012345678",
    "swiftCode": "CNCB",
    "email": "123456789@qq.com",
    "contacts": "张三",
    "tel": "13217819203",
    "location": "上海市",
    "detailedAddress": "上海市静安区恒创国际5楼"
  }
  updateSysCompany(data).then(res => {
    router.push('companyInfo')
  })
}

</script>
<style scoped>
.title_font {
  font-weight: bold;
  font-size: 14px;
  margin: 10px 0 10px 0;
}

.pag-container {
  margin-top: 10px;
  box-sizing: border-box;
  padding: 10px;
  color: #606266;
  font-family: 'Source Han Sans CN';
  font-weight: 600;
}

.box_container {
  box-sizing: border-box;
  padding: 10px;
}
</style>